---
title: useValue
description: "`useValue`は、`useBreakpointValue`と`useColorModeValue`を組み合わせたカスタムフックです。"
storybook: hooks-usevalue--basic
source: hooks/use-value
---

```tsx preview functional client
const breakpoint = useBreakpoint()
const color = useValue({ base: "red", md: "green" })

return <Box color={color}>The current breakpoint is "{breakpoint}"</Box>
```

```tsx preview functional client
const { colorMode } = useColorMode()
const color = useValue(["green", "red"])

return <Box color={color}>The current colorMode is "{colorMode}"</Box>
```

## 使い方

:::code-group

```tsx [package]
import { useValue } from "@yamada-ui/react"
```

```tsx [alias]
import { useValue } from "@/components/ui"
```

```tsx [monorepo]
import { useValue } from "@workspaces/ui"
```

:::

```tsx
const color = useValue({ base: "red", md: "green" })
```

:::note
`useValue`は、[useBreakpointValue](/hooks/use-breakpoint-value)と[useColorModeValue](/hooks/use-color-mode-value)を使用しています。
:::
